<template>
    <view class="page__bd">
        <hb-toptips ref="toptips" @complete="toptips = $refs.toptips"></hb-toptips>
        <view class="hb-bar bg-white">
            <view class="action">
                <text class="hb-icon_title text-blue"></text>
                顶部提示
            </view>
        </view>
        <view class="padding bg-white">
            <button class="hb-btn hb-btn_success" @tap="onBtnSucClick">操作成功</button>
        </view>
        <view class="padding bg-white">
            <button class="hb-btn hb-btn_error" @tap="onBtnErrClick">操作错误</button>
        </view>
        <view class="padding bg-white">
            <button class="hb-btn hb-btn_warning" @tap="onBtnwarnClick">操作警告</button>
        </view>
        <view class="padding bg-white">
            <button class="hb-btn hb-btn_primary" @tap="onBtnClick">操作信息</button>
        </view>
    </view>
</template>

<script>
    import hbToptips from '@/components/hb-toptips/index';
    export default {
        components: {
            hbToptips
        },

        methods: {
            onBtnSucClick(e) {
                //操作方法一
                // this.$refs.toptips.info({
                //     message: '我是消息'
                // })
                // 操作方法二
                //注意：this.toptips  指向的是页面的 ref="toptips" 组件,组件内必须设置 @complete
                //在小程序下，不要在自定义顶部导航的页面下使用
                this.toptips.success({
                    message: '操作成功'
                })
            },
            onBtnErrClick(e) {
                this.toptips.error({
                    message: '操作错误'
                })
            },
            onBtnwarnClick(e) {
                this.toptips.warn({
                    message: '操作警告'
                })
            },
            onBtnClick(e) {
                this.toptips.info({
                    message: '这是一条信息'
                })
            }
        }

    }
</script>

<style>
</style>
